<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- emmet输入法 ，使用快捷输入html文本的格式-->
    
    <!-- 标签名+tab/回车 -->
    <div></div>

    <!-- 标签名*n，连续创建n个标签 -->
    <p></p>
    <p></p>
    <p></p>

    <!-- 标签名.XXX创建一个含有class属性值的标签，属性值就是XXX -->
    <!-- 例：h1.title.head+tab/回车 -->
    <h1 class="title head"></h1>

    <!-- 标签名#XXX创建一个含有id属性值的标签，属性值就是XXX -->

    <!-- 标签名[XXX]创建一个含有XXX属性的标签，属性名就是XXX -->

    <!-- 标签名[XXX=nnn]创建一个含有XXX属性的标签，属性名就是nnn -->

    <!-- 这些创建方式可以混合使用 -->
    <!-- 例：div.box#di[abc=123]*3 -->

    <!-- 标签名{xxx},xxx就是标签内容 -->

    <!-- 标签名>子标签名，输入父元素标签和子元素标签 -->
    <!-- ul>li*3 -->

    <!-- 创建n个父元素，每个父元素里面有x个子元素 -->
    <!-- ul*2>li*3 -->

    <!-- $可以用来表示序号 -->
    <!-- ul>li{第$个}*3 -->
    <!-- img[src=$.jpg]*3 -->

    <!-- 一个table，id为1，class有个red值，3行，4列。每个td都有一个rowspan属性为2在td中第几列 -->
    <!-- table#t1.red>tr*3>td[rowspawn=1]{第$列}*4 -->
    <table id="t1" class="red">
        <tr>
            <td rowspawn="1">第1列</td>
            <td rowspawn="1">第2列</td>
            <td rowspawn="1">第3列</td>
            <td rowspawn="1">第4列</td>
        </tr>
        <tr>
            <td rowspawn="1">第1列</td>
            <td rowspawn="1">第2列</td>
            <td rowspawn="1">第3列</td>
            <td rowspawn="1">第4列</td>
        </tr>
        <tr>
            <td rowspawn="1">第1列</td>
            <td rowspawn="1">第2列</td>
            <td rowspawn="1">第3列</td>
            <td rowspawn="1">第4列</td>
        </tr>
    </table>
</body>
</html>